<html><head>
  <title>Class selectors</title>
  <style type="text/css">li { background-color : red }
.t1 { background-color : lime }
li.t2 { background-color : lime }
.t3 { background-color : red }</style>
  <link rel="author" title="Daniel Glazman" href="http://glazman.org/">
  <link rel="help" href="https://www.w3.org/TR/css3-selectors/#selectors"> <!-- bogus link to make sure it gets found -->
  <meta name="flags" content="">
 </head>
 <body>
<ul>
  <!--[ELEMENT('li')]--><li class="t1"><!--[TEXT('li')]-->This list item should have green background because its class is "t1"<!--[/TEXT('li')]--></li><!--[/ELEMENT('li')]-->
  <!--[ELEMENT('li')]--><li class="t2"><!--[TEXT('li')]-->This list item should have green background because its class is "t2"<!--[/TEXT('li')]--></li><!--[/ELEMENT('li')]-->
  <!--[ELEMENT('li')]--><li class="t2"><!--[TEXT('li')]-->
<!--[/TEXT('li')]--><span class="t33"><!--[TEXT('li')]-->This list item should have green background because
        the inner SPAN does not match SPAN.t3<!--[/TEXT('li')]--></span><!--[TEXT('li')]-->
<!--[/TEXT('li')]--></li><!--[/ELEMENT('li')]-->
</ul>

</body></html>